<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>编辑</title>
</head>
<body>
    <div class="main-container">
	    <div id="assign-table"></div>
		<form class="layui-form layui-form-pane">
		    <input type="hidden" name="bean.id" value="#(bean.id)">
	        <input type="hidden" name="bean.adminId" value="#(bean.adminId)">
		    <input type="hidden" name="bean.roleIds" value="#(bean.roleIds)">
		    
		    <div class="bottom" style="display: none;">
		        <div class="button-container">
		            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="data-save" id="data-save">
		                <i class="layui-icon layui-icon-ok"></i> 提交
		            </button>
		        </div>
		    </div>
		</form>
	</div>

#include("../../_common/foot.html")
	<script type="text/javascript">
	layui.use(['jquery', 'form', 'transfer'], function() {
	    var $ = layui.jquery;
	    var form = layui.form;
	    var transfer = layui.transfer;
	    
	    //定义标题及数据源
	    transfer.render({
			elem: '#assign-table'
			,title: ['候选角色', '已指派角色']  //自定义标题
			,data: #(roleData)
			,value: [#(bean.roleIds)]
			,width: 300 //定义宽度
			,height: 400 //定义高度
			,onchange: function(obj, index){
				var data = transfer.getData('ID-assign-table');
				var ids = "";
				for(var i = 0; i < data.length; i++){
					if (i == 0){
						ids += data[i].value;
					} else {
						ids += "," + data[i].value;
					}
				}
                $("[name='bean.roleIds']").val(ids);
			}
	        ,id: "ID-assign-table"
	    })
	});
	</script>
</body>
</html>